<template>
  <!-- 用户信息展示组件 -->
  <div v-if="!loading">
    <el-card v-if="isAuthenticated" class="user-profile">
      <!-- 用户头像 -->
      <div class="avatar-container">
        <img 
          :src="userData.avatar_url || '/default-avatar.png'" 
          class="user-avatar"
          @error.once="handleAvatarError"
        />
      </div>

      <!-- 用户信息 -->
      <div class="user-info">
        <h2>{{ userData.username }}</h2>
        <el-tag :type="roleTagType">{{ userData.role }}</el-tag>
        
        <div class="meta-info">
          <p><el-icon><Message /></el-icon> {{ userData.email }}</p>
          <p v-if="userData.phone">
            <el-icon><Iphone /></el-icon> {{ userData.phone }}
          </p>
          <p>
            <el-icon><Clock /></el-icon> 
            注册时间：{{ formatDate(userData.created_at) }}
          </p>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button 
          type="success" 
          @click="handleMyPosts"
        >
          我的帖子
        </el-button>
        <el-button 
          type="warning" 
          @click="handleMyCharacters"
        >
          我的角色
        </el-button>
        <!-- <el-button 
          type="primary" 
          @click="showEditDialog = true"
        >
          编辑资料
        </el-button> -->
        <el-button 
          type="danger" 
          @click="handleLogout"
        >
          退出登录
        </el-button>
      </div>
    </el-card>

    <!-- 未登录状态 -->
    <div v-else class="not-login">
      <h3>未检测到登录状态</h3>
      <el-button type="primary" @click="router.push('/login')">
        立即登录
      </el-button>
    </div>
  </div>

  <!-- 加载状态 -->
  <el-skeleton v-else :rows="5" animated />

  <!-- 错误提示 -->
  <el-alert
    v-if="error"
    :title="error"
    type="error"
    show-icon
    class="error-alert"
  />
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useAuthStore } from '@/stores/authStore'
import { Clock, Message, Iphone } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { computed, ref, onMounted } from 'vue'

const router = useRouter()
const authStore = useAuthStore()

// 确保获取最新状态
const { user, isAuthenticated, loading, error } = storeToRefs(authStore)

// 增加状态同步机制
const forceRefresh = ref(false)

if (!authStore.user) {
  authStore.initializeFromStorage()
}
// 用户数据
const userData = computed(() => ({
  ...user.value,
  role: user.value?.role || '普通用户',
  created_at: user.value?.created_at || new Date().toISOString()
}))

// 角色标签样式
const roleTagType = computed(() => {
  return user.value?.role === 'admin' ? 'danger' : 'success'
})

// 头像加载失败处理
const handleAvatarError = (e) => {
  e.target.src = '/default-avatar.png'
}

// 时间格式化
const formatDate = (isoString) => {
  return new Date(isoString).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}
const handleMyPosts = () => {
  router.push('/user/post')
}

const handleMyCharacters = () => {
  router.push('/user/character')
}
// 退出登录
const handleLogout = () => {
  authStore.logout()
}
</script>

<style scoped>
/* 保持原有样式不变 */
.user-profile {
  max-width: 600px;
  margin: 2rem auto;
  text-align: center;
}

.avatar-container {
  margin: 1rem 0;
}

.user-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.user-avatar:hover {
  transform: scale(1.05);
}

.user-info h2 {
  margin: 1rem 0 0.5rem;
}

.meta-info {
  text-align: left;
  margin: 1.5rem 0;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
}

.meta-info p {
  margin: 0.8rem 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-buttons {
  margin-top: 1.5rem;
}

.not-login {
  text-align: center;
  padding: 2rem;
}

.error-alert {
  max-width: 600px;
  margin: 1rem auto;
}
</style>